<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>影单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="30">
        <el-col :span="7">
          <el-input placeholder="请输入电影名" v-model="name" @keyup.enter.native="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加电影</el-button>
        </el-col>
      </el-row>
      <el-table :default-sort = "{prop: 'mid', order: 'descending'}" :data="perPage_data" stripe  style="width: 100%" tooltip-effect="light" size="mini">
        <el-table-column sortable align="center" fixed="left" label="序号" prop="mid"></el-table-column>
        <el-table-column
          fixed
          label="状态"
          prop="status"
          :filters="[{ text: '已看', value: '已看' }, { text: '在看', value: '在看' }, { text: '想看', value: '想看' }]"
          :filter-method="filterStatus"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '已看' ? 'primary' : scope.row.status === '在看' ? 'warning' : 'success'"
              disable-transitions>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed label="海报">
          <template width="90" slot-scope="scope">
            <img style="width: 80px;height: 120px;border: none" :src="scope.row.img"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip fixed label="电影名称" prop="name"></el-table-column>
        <el-table-column show-overflow-tooltip label="链接地址">
          <template slot-scope="scope">
            <a :href="scope.row.link" target="_blank">{{scope.row.link}}</a>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="资料" prop="meta"></el-table-column>
        <el-table-column show-tooltip-when-overflow label="简介" prop="content"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template v-slot:default="scope">
            <el-button type="primary" icon="el-icon-edit" @click="open_edit_movie(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delete_movie(scope.row.mid)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <pageination
        :total-data="total_data"
        @pageBar="handleChangePage"
        :layout="'total,prev,pager,next'"
        :pagesize="pagesize"
      ></pageination>
    </el-card>
    <el-dialog
      title="添加电影"
      :visible.sync="addDialogVisible"
      @close="addDialogClosed"
      width="50%">
      <!--内容主体区域-->
      <el-form :model="movieForm" :rules="MovieRules" ref="MovieFormRef">
        <el-form-item label="状态" prop="status">
          <el-select v-model="movieForm.status" placeholder="请选择电影状态" size="small">
            <el-option label="已看" value="1"></el-option>
            <el-option label="在看" value="2"></el-option>
            <el-option label="想看" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电影名" prop="name">
          <el-input v-model="movieForm.name"></el-input>
        </el-form-item>
        <el-form-item label="海报图片链接地址" prop="img">
          <el-input v-model="movieForm.img"></el-input>
        </el-form-item>
        <el-form-item label="电影介绍地址" prop="link">
          <el-input v-model="movieForm.link"></el-input>
        </el-form-item>
        <el-form-item label="相关资料" prop="meta">
          <el-input v-model="movieForm.meta" type="textarea" placeholder="输入样例：已看电影日期/豆瓣标签/豆瓣评分:10分"></el-input>
        </el-form-item>
        <el-form-item label="电影简介" prop="content">
          <el-input type="textarea" v-model="movieForm.content"></el-input>
        </el-form-item>
      </el-form>
      <!--内容底部区域-->
      <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMovie()">确 定</el-button>
            </span>
    </el-dialog>
        <el-dialog
          title="修改电影信息"
          :visible.sync="editDialogVisible"
          @close="editDialogClosed"
          width="50%">
          <!--内容主体区域-->
          <el-form :model="editMovieForm" :rules="MovieRules" ref="editMovieFormRef">
            <el-form-item label="状态" prop="status">
              <el-select v-model="editMovieForm.status" placeholder="请选择电影状态" size="small">
                <el-option label="已看" value="1"></el-option>
                <el-option label="在看" value="2"></el-option>
                <el-option label="想看" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电影名" prop="name">
              <el-input v-model="editMovieForm.name"></el-input>
            </el-form-item>
            <el-form-item label="海报图片链接地址" prop="img">
              <el-input v-model="editMovieForm.img"></el-input>
            </el-form-item>
            <el-form-item label="电影介绍地址" prop="link">
              <el-input v-model="editMovieForm.link"></el-input>
            </el-form-item>
            <el-form-item label="相关资料" prop="meta">
              <el-input v-model="editMovieForm.meta" type="textarea" placeholder="输入样例：已看电影日期/豆瓣标签/豆瓣评分:10分"></el-input>
            </el-form-item>
            <el-form-item label="电影简介" prop="content">
              <el-input type="textarea" v-model="editMovieForm.content"></el-input>
            </el-form-item>
          </el-form>
          <!--内容底部区域-->
          <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit_movie()">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import pageination from '@/components/pageination'
import { MessageBox } from 'element-ui'

export default {
  name: 'ManageMovie',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    pageination
  },
  data () {
    var validateURL = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入链接地址！'))
      } else if (!/^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/?:]?.*$/.test(value)) {
        callback(new Error('链接格式错误！'))
      }
      callback()
    }

    return {
      name: '',
      taglist: [],
      perPage_data: [
        {
          mid: 1,
          name: '测试一下',
          img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xsA-3qUw6cqmd8nRfxk6TQHaEK?w=309&h=180&c=7&o=5&dpr=1.25&pid=1.7',
          content: '三千年前，天下动荡，人神共遇大劫，不想哪吒的一缕魂魄逃脱天罗地网，世世转世投胎，这一世与东海市酷爱机车的热血青年李云祥人神共生。然而龙族对哪吒恩怨并未善罢甘休，有着哪吒元神的李云祥，亦无法逃脱被龙族赶尽杀绝的宿命。东海危在旦夕，李云祥是否能够与哪吒元神并肩作战，成为抵抗龙族的英雄？东海市的子民能否得到拯救？',
          link: 'http://www.baidu.com',
          status: '已看',
          meta: '顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶'
        }
      ],
      currentPage: 1,
      total_data: 10,
      pagesize: 9,
      addDialogVisible: false,
      editDialogVisible: false,
      movieForm: {
        name: '',
        img: '',
        content: '',
        link: '',
        status: '',
        meta: ''
      },
      editMovieForm: {
        mid: 3,
        name: '测试一下',
        img: 'http://www.baidu.com',
        content: '三千年前，天下动荡，人神共遇大劫，不想哪吒的一缕魂魄逃脱天罗地网，世世转世投胎，这一世与东海市酷爱机车的热血青年李云祥人神共生。然而龙族对哪吒恩怨并未善罢甘休，有着哪吒元神的李云祥，亦无法逃脱被龙族赶尽杀绝的宿命。东海危在旦夕，李云祥是否能够与哪吒元神并肩作战，成为抵抗龙族的英雄？东海市的子民能否得到拯救？',
        link: 'http://www.baidu.com',
        status: '想看',
        meta: '顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶'
      },
      MovieRules: {
        name: [
          { required: true, message: '请输入电影名称！', trigger: 'blur' }
        ],
        img: [
          { required: true, validator: validateURL, tigger: 'blur' }
        ],
        link: [
          { required: true, validator: validateURL, tigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入电影简介！', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择电影状态！', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    filterStatus (value, row) {
      return row.status === value
    },
    handleChangePage (val) {
      this.$axios({
        url: '/getMovies',
        data: val,
        method: 'post'
      }).then(response => {
        console.log(response.data)
        this.perPage_data = this.taglist.slice((val.pageCurrent - 1) * this.pagesize, val.pageCurrent * this.pagesize)
      }).catch(error => {
        console.log(error)
      })
    },
    getMovies () {
      this.$axios({
        method: 'post',
        url: '/getMovies',
        data: {}
      }).then(res => {
        console.log(res)
        res.data.forEach((key) => {
          if (key.status === 1) {
            key.status = '已看'
          } else if (key.status === 0) {
            key.status = '想看'
          } else if (key.status === 2) {
            key.status = '在看'
          }
        })
        this.perPage_data = res.data.slice(0, this.pagesize)
        this.total_data = res.data.length
      })
    },
    editDialogClosed () {
      this.$refs.editMovieFormRef.resetFields()
    },
    open_edit_movie (el) {
      this.editDialogVisible = true
      this.editMovieForm.mid = el.mid
      this.editMovieForm.content = el.content
      this.editMovieForm.img = el.img
      this.editMovieForm.link = el.link
      this.editMovieForm.meta = el.meta
      this.editMovieForm.name = el.name
      this.editMovieForm.status = el.status
    },
    delete_movie (mid) {
      MessageBox.confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/deleteMovie/' + mid,
          method: 'delete'
        }).then(response => {
          if (response.data !== 1) this.$message.error('删除失败')
          else this.$message.success('删除成功')
          this.$router.go(0)
        })
      })
    },
    search () {
      if (this.name !== '') {
        this.$axios({
          method: 'get',
          url: '/getMovies/' + this.name
        }).then(res => {
          console.log(res)
          res.data.forEach((key) => {
            if (key.status === 1) {
              key.status = '已看'
            } else if (key.status === 0) {
              key.status = '想看'
            } else if (key.status === 2) {
              key.status = '在看'
            }
          })
          this.perPage_data = res.data.slice(0, this.pagesize)
          this.total_data = res.data.length
        })
      } else this.getMovies()
    },
    addDialogClosed () {
      this.$refs.MovieFormRef.resetFields()
    },
    addMovie () {
      this.$refs.MovieFormRef.validate(valid => {
        if (valid) {
          this.$axios({
            url: '/movies/add',
            method: 'post',
            data: this.movieForm
          }).then(res => {
            if (res.data === 1) {
              this.$message.success('添加成功！')
              this.$refs.MovieFormRef.resetFields()
              this.addDialogVisible = false
              this.$router.go(0)
            } else {
              this.$message.error('添加失败！')
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    edit_movie () {
      console.log(this.editMovieForm.mid)
      var st = this.editMovieForm.status
      if (this.editMovieForm.status === '已看') {
        st = 1
      } else if (this.editMovieForm.status === '在看') {
        st = 2
      } else if (this.editMovieForm.status === '想看') {
        st = 0
      }
      this.editMovieForm.status = st - 0
      this.$axios({
        method: 'put',
        url: '/updateMovie/',
        data: this.editMovieForm
      }).then(res => {
        if (res.data !== 1) this.$message.error('修改失败')
        else {
          this.$message.success('修改成功')
          this.editDialogVisible = false
          this.$router.go(0)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getMovies()
  }
}
</script>

<style>
.el-tooltip__popper{
  font-size: 14px;
  max-width: 50%;
}
</style>
